<!--
 * @Descripttion: 
 * @Author: YuZhenJing
 * @Date: 2020-01-01 13:01:36
 * @LastEditors: YuZhenJing
 * @LastEditTime: 2020-07-01 14:27:06
 -->
<template>
  <div class="login main-box">
    <vue-particles
      :clickEffect="false"
      :lineLinked="true"
      :lineOpacity="0.4"
      :linesDistance="150"
      :linesWidth="1"
      :moveSpeed="6"
      :particleOpacity="0.5"
      :particleSize="5"
      :particlesNumber="80"
      color="#ffffff"
      hoverMode="repulse"
      linesColor="#ffffff"
      shapeType="circle"
    ></vue-particles>
    <el-row align="middle" justify="center" style="height:90vh;" type="flex">
      <div class="login_box">
        <el-card>
          <div class="text-head text-secondary">
            <i @click="openTheme" class="icon-asm" style="vertical-align: -10%" />
            <span v-text="productName"></span>
          </div>
          <el-progress :percentage="progressValue" :show-text="false"></el-progress>
          <el-form
            :model="fromLogin"
            :rules="rules"
            ref="loginForm"
            status-icon
            style="margin-top:10px;"
          >
            <el-form-item :show-message="false" prop="username">
              <el-input
                @keyup.enter.native="submit"
                autocomplete="off"
                class="text-white"
                placeholder="请输入用户名称"
                v-model="fromLogin.username"
              ></el-input>
            </el-form-item>
            <el-form-item :show-message="false" prop="password">
              <el-input
                @keyup.enter.native="submit"
                autocomplete="off"
                placeholder="请输入用户密码"
                type="password"
                v-model="fromLogin.password"
              ></el-input>
            </el-form-item>
          </el-form>
          <el-button :loading="loading" @click="submit" style="width:100%">登录</el-button>
        </el-card>
      </div>
    </el-row>
    <el-dialog :visible.sync="theme.openWindow" title="请选择您喜欢的主题" width="30%">
      <el-select placeholder="请选择" style="width:100%" v-model="theme.value">
        <el-option
          :key="item.value"
          :label="item.label"
          :value="item.value"
          v-for="item in themeList"
        ></el-option>
      </el-select>
      <span class="dialog-footer" slot="footer">
        <el-button @click="theme.openWindow = false">取 消</el-button>
        <el-button @click="upTheme" type="primary">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      :visible.sync="svc.openWindow"
      custom-class="v-code"
      :show-close="false"
      :close-on-click-modal="false"
      width="375px"
    >
      <el-card shadow="never">
        <verify-code
          ref="slideDiv"
          :w="350"
          :slider-text="svc.text"
          :h="175"
          @success="handleSuccess"
          @fail="handleError"
        ></verify-code>
      </el-card>
    </el-dialog>
  </div>
</template>
<script>
import { mapState, mapMutations, mapActions } from 'vuex'
export default {
  name: 'login',
  components: {
    'verify-code': require('@/components/common/vcode/VerificationCode').default
  },
  data() {
    return {
      theme: {
        openWindow: false,
        value: {}
      },
      svc: {
        openWindow: false,
        loginError: false,
        text: '向右滑动'
      },
      fromLogin: {
        username: 'super',
        password: '123',
        platformTypeCode: 'pc_fun_code'
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名称', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入登录密码', trigger: 'blur' }
        ]
      },
      loading: false,
      position: 'bottom',
      progressValue: 100
    }
  },
  computed: {
    ...mapState('theme', ['themeList', 'themeApp']),
    ...mapState('login', ['productName'])
  },
  methods: {
    ...mapMutations('theme', ['updateTheme']),
    ...mapActions('login', ['loginByUserName']),
    // 打开主题页面
    openTheme() {
      // 微服务模式下可切换主题
      if (!process.env.VUE_APP_SINGLERUN) {
        this.theme.value = this.themeApp
        this.theme.openWindow = true
      }
    },
    // 更新主题
    upTheme() {
      this.updateTheme(this.theme.value)
      this.theme.openWindow = false
    },
    // 执行登录
    submit() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          if (process.env.VUE_APP_SINGLERUN === 'true') {
            // 独立运行模式直接请求登录
            this.requestLogin()
          } else {
            if (this.svc.loginError) {
              // 只有登录错误，再次登录才会打开验证码
              this.svc.openWindow = true
            } else {
              this.requestLogin()
            }
          }
        }
      })
    },
    // 验证码 验证通过
    handleSuccess() {
      this.$refs.slideDiv.reset()
      this.svc.openWindow = false
      this.requestLogin()
    },
    // 验证码 验证失败
    handleError() {
      this.loading = false
      this.svc.openWindow = false
      this.$alert('校验失败，请将滑块移动到正确位置', '提示', {
        type: 'error',
        confirmButtonText: '确定'
      })
    },
    // 请求登录
    requestLogin() {
      this.loginByUserName(this.fromLogin)
        .then(() => {
          this.$router.push('/')
          this.loading = false
        })
        .catch(err => {
          this.loading = false
          this.svc.loginError = true
          if (err.data.returnType === 'error') {
            this.$alert(err.data.returnMsg, '提示', {
              type: 'error',
              confirmButtonText: '确定'
            })
          } else {
            let errInfo = err.message
            if (errInfo !== undefined) {
              console.log('landing:' + errInfo)
            }
          }
        })
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '../../css/icon/asm-icon/style.css'
.main-box
  height 100vh
  position relative
  // 登录页面背景样式[开始]
  #particles-js
    position fixed
    top 0
    left 0
    bottom 0
    right 0
    background $primary !important
    background var(--a-color-primary) !important
    background-size cover
    background-position 50% 50%
    background-repeat no-repeat
  // 登录盒子样式[开始]
  .login_box
    max-width 500px
    min-width 400px
    .el-card
      border none
      opacity 0.7
      box-shadow 0 2px 22px 0 rgba(0, 0, 0, 1)
    >>>.el-progress-bar__inner
      background $secondary !important
      background var(--a-color-secondary) !important
    >>>.el-form-item__label
      color #fff
    >>>.el-input__inner
      background linear-gradient(90deg, $secondary 11%, $lighten-secondary 75%) !important
      background linear-gradient(90deg, var(--a-color-secondary) 11%, var(--a-color-lighten-secondary) 75%) !important
      color #fff
    >>>.el-button
      background linear-gradient(90deg, $secondary 11%, $lighten-secondary 75%) !important
      background linear-gradient(90deg, var(--a-color-secondary) 11%, var(--a-color-lighten-secondary) 75%) !important
      color #fff
    .text-head
      text-align center
      font-size 1.6rem
      margin-bottom 10px
      span
        margin-left 2px
  >>>.v-code
    .el-dialog__header
      display none
    .el-dialog__body
      padding 5px 5px
      .el-card__body
        padding 5px
</style>
